import React from 'react';
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"

import Home from "./pages/Home"
import About from "./pages/About"
import CourseLayout from "./pages/CourseLayout"
import CourseList from "./pages/CourseList"
import Course from "./pages/Course"

const App: React.FC = () => {
  return <BrowserRouter>
    <div>
      <Link to="/" style={{ "padding": 10 }}>Home</Link>
      <Link to="/about" style={{ "padding": 10 }}>About</Link>
      <Link to="/courses" style={{ "padding": 10 }}>Courses</Link>
    </div>
    <Routes>
      <Route path='/' element={<Home />}></Route>
      <Route path='/about' element={<About />}></Route>
      <Route path='/courses' element={<CourseLayout />}>
        <Route index element={<CourseList />} />
        <Route path=':id' element={<Course />} />
      </Route>
    </Routes>
  </BrowserRouter>
}

export default App
